<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录2</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			body {
				height: 100vh;
				background: linear-gradient(to right, #6af4ff, #ffffff);
			}

			.Box {
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 550px;
				height: 330px;
				display: flex;
			}


			form {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -60%);
				width: 80%;
				text-align: center;
			}

			h3 {
				font-size: 24px;
				margin-bottom: 20px;
				letter-spacing: 5px;
			}

			input {
				width: 100%;
				height: 38px;
				border: 1px solid #000000;
				background-color: transparent;
				padding-left: 10px;
				font-size: 12px;
				color: #000000;
				margin-bottom: 15px;
				outline: none;
			}

			.desc {
				margin: 0px 20px 30px;
				text-align: center;
				font-size: 12px;
				color: #828282;
			}

			.loginBtn {
				width: 100%;
				line-height: 36px;
				text-align: center;
				font-size: 15px;
				color: #fff;
				background: rgb(57, 99, 134);
				outline: none;
				border: none;
				margin-top: 10px;
			}

			.no {
				display: flex;
				justify-content: space-between;
				cursor: pointer;
				text-align: center;
				font-size: 12px;
				color: #828282;
			}
		</style>
	</head>
	<body>
		<div class="Box">
			<form action="">
				<h3>欢迎登录</h3>
				<p class="desc">WELCOME LOGIN</p>
				<input type="text" placeholder="请输入账号" required>
				<input type="password" placeholder="请输入密码" required>
				<input type="submit" class="loginBtn" value="登录"></button>
				<p class="no">
					<span>忘记密码</span>
					<span>没有账号？立即注册</span>
				</p>
			</form>
		</div>
	</body>
</html>